// --------------------------- 地图配置 -----------------------
let map_adcode = 500000;
let map1_zoom = 7;
let map1_center = [107.766165, 30.17807];
let map1_enable = true;
let map2_zoom = 7;
let map2_center = [108.206077, 30.256513];
let map2_enable = false;
/**----------------------- 工具函数 -------------------------*/
var colors = {};
var getColorBySoc = function (adcode) {
    if (adcode) {
        if (!colors[adcode]) {
            // if(adcode==map_adcode){
            if (adcode === map_adcode) {
                return null;
            }
            return '#033447'
            // return '#FFFFFF'
        }
    } else {
        return null
    }
};

//获得多少天之前的日期 列如2018-01-01
function getDay(day) {
    let today = new Date();
    let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
    today.setTime(targetday_milliseconds); //注意，这行是关键代码
    let tYear = today.getFullYear();
    let tMonth = today.getMonth();
    let tDate = today.getDate();
    tMonth = tMonth + 1;
    // tDate = tDate;
    return tYear + "-" + tMonth + "-" + tDate;
}

//--------------------- 地图１ -----------------------
var map = new AMap.Map("map", {
    // zoom: 7,//地图级别
    zoom: map1_zoom,
    center: map1_center,
    mapStyle: 'amap://styles/blue',
    rotateEnable: map1_enable,
    dragEnable: map1_enable,
    scrollWheel: map1_enable,
    doubleClickZoom: map1_enable
});
//--------------------- 行政区浏览1 ------------------
AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function (DistrictExplorer, $) {
    //创建一个实例
    let districtExplorer = window.districtExplorer = new DistrictExplorer({
        eventSupport: true, //打开事件支持
        map: map
    });
    let node_all;
    //当前聚焦的区域
    let currentAreaNode = null;

    // let $tipMarkerContent = $('<font face="微软雅黑" size="3" color="#FFFFFF"></font>');
    let $tipMarkerContent = $('<div class="region"></div>');

    let tipMarker = new AMap.Marker({
        content: $tipMarkerContent.get(0),
        offset: new AMap.Pixel(0, 0),
        bubble: true,
        zIndex: 99
    });

    //根据Hover状态设置相关样式
    function toggleHoverFeature(feature, isHover, position) {

        tipMarker.setMap(isHover ? map : null);

        if (!feature) {
            return;
        }

        let props = feature.properties;

        if (isHover) {

            //更新提示内容
            $tipMarkerContent.html(props.name);
            //更新位置
            tipMarker.setPosition(position || props.center);
        }

        $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);

        //更新相关多边形的样式
        let polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
        for (let i = 0, len = polys.length; i < len; i++) {

            polys[i].setOptions({
                fillOpacity: isHover ? 0.5 : 0.2
            });
        }
    }

    //监听feature的hover事件
    districtExplorer.on('featureMouseout featureMouseover', function (e, feature) {
        toggleHoverFeature(feature, e.type === 'featureMouseover',
            e.originalEvent ? e.originalEvent.lnglat : null);
    });

    //监听鼠标在feature上滑动
    districtExplorer.on('featureMousemove', function (e) {
        //更新提示位置
        tipMarker.setPosition(e.originalEvent.lnglat);
    });

    //绘制某个区域的边界
    function renderAreaPolygons(areaNode) {
        node_all = areaNode;
        //清除已有的绘制内容
        districtExplorer.clearFeaturePolygons();

        //绘制子区域
        districtExplorer.renderSubFeatures(areaNode, function () {

            // let fillColor = colors[i % colors.length];
            // let strokeColor = colors[colors.length - 1 - i % colors.length];
            let strokeColor = "#FFFFFF";

            return {
                cursor: 'default',
                bubble: true,
                strokeColor: strokeColor, //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: null, //填充色
                fillOpacity: 0.35, //填充透明度
            };
        });

        //绘制父区域
        districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: '#FFFFFF', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: null, //填充色
            fillOpacity: 0.35, //填充透明度
        });
    }

    //切换区域后刷新显示内容
    function refreshAreaNode(areaNode) {

        districtExplorer.setHoverFeature(null);

        renderAreaPolygons(areaNode);

        //更新选中节点的class
        let $nodeEles = $('#area-tree').find('h2');

        $nodeEles.removeClass('selected');

        let $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');

        //展开下层节点
        $selectedNode.closest('li').removeClass('hide-sub');

        //折叠下层的子节点
        $selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
    }

    //切换区域
    function switch2AreaNode(adcode, callback) {

        if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
            return;
        }

        loadAreaNode(adcode, function (error, areaNode) {

            if (error) {

                if (callback) {
                    callback(error);
                }

                return;
            }

            currentAreaNode = window.currentAreaNode = areaNode;

            //设置当前使用的定位用节点
            districtExplorer.setAreaNodesForLocating([currentAreaNode]);

            refreshAreaNode(areaNode);

            if (callback) {
                callback(null, areaNode);
            }
        });
    }

    //加载区域
    function loadAreaNode(adcode, callback) {

        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

            if (error) {

                if (callback) {
                    callback(error);
                }

                console.error(error);

                return;
            }

            if (callback) {
                callback(null, areaNode);
            }
        });
    }

    //重庆
    // switch2AreaNode(map_adcode);
    // 北京
    // map_adcode
    switch2AreaNode(map_adcode);
});
var disCountry = new AMap.DistrictLayer.Country({
    zIndex: 19,
    SOC: 'CHN',
    depth: 1,
    styles: {
        'fill': function (props) {
            return getColorBySoc(props.adcode_pro)
        }
    }
});
map.add(disCountry);
//---------------------- 地图２ ----------------------
var map2 = new AMap.Map("map2", {
    zoom: map2_zoom, //地图级别
    center: map2_center, //地图中心
    mapStyle: 'amap://styles/blue',
    rotateEnable: map2_enable,
    dragEnable: map2_enable,
    scrollWheel: map2_enable,
    doubleClickZoom: map2_enable
});
//---------------------- 行政区浏览2 -----------------
AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function (DistrictExplorer, $) {
    //创建一个实例
    let districtExplorer = window.districtExplorer = new DistrictExplorer({
        eventSupport: true, //打开事件支持
        map: map2
    });

    //当前聚焦的区域
    let currentAreaNode = null;

    // let $tipMarkerContent = $('<font face="微软雅黑" size="3" color="#FFFFFF"></font>');
    let $tipMarkerContent = $('<div class="region"></div>');

    let tipMarker = new AMap.Marker({
        content: $tipMarkerContent.get(0),
        offset: new AMap.Pixel(15, 0),
        bubble: true,
        zIndex: 99,
    });

    //根据Hover状态设置相关样式
    function toggleHoverFeature(feature, isHover, position) {

        tipMarker.setMap(isHover ? map2 : null);

        if (!feature) {
            return;
        }

        let props = feature.properties;

        if (isHover) {

            //更新提示内容
            $tipMarkerContent.html("  " + props.name);
            //更新位置
            tipMarker.setPosition(position || props.center);
        }

        $('#area-tree').find('h2[data-adcode="' + props.adcode + '"]').toggleClass('hover', isHover);

        //更新相关多边形的样式
        let polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
        for (let i = 0, len = polys.length; i < len; i++) {

            polys[i].setOptions({
                fillOpacity: isHover ? 0.5 : 0.2
            });
        }
    }

    //监听feature的hover事件
    districtExplorer.on('featureMouseout featureMouseover', function (e, feature) {
        toggleHoverFeature(feature, e.type === 'featureMouseover',
            e.originalEvent ? e.originalEvent.lnglat : null);
    });

    //监听鼠标在feature上滑动
    districtExplorer.on('featureMousemove', function (e) {
        //更新提示位置
        tipMarker.setPosition(e.originalEvent.lnglat);
    });
    // let thisAdcode;
    //监听鼠标点击feature
    districtExplorer.on('featureClick', function (e, feature) {
        renderAreaPolygons(currentAreaNode, feature.properties.adcode);
        let thisd = document.getElementById('thisd');
        thisd.innerText = feature.properties.name;
        let params = {
            "adcode": feature.properties.adcode,
            "time": slider_value
        };
        // console.log(params);
        let table = layui.table;
        table.reload('blackbroad2_table', {
            where: params,
            url: '/d/broadcast/region',
            page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    });

    //绘制某个区域的边界
    function renderAreaPolygons(areaNode, specialAdcode) {
        node_all = areaNode;
        //清除已有的绘制内容
        districtExplorer.clearFeaturePolygons();

        //绘制子区域
        districtExplorer.renderSubFeatures(areaNode, function (feature) {
            if (feature.properties.adcode === specialAdcode) {
                return {
                    cursor: 'default',
                    bubble: true,
                    strokeColor: '#FFFFFF', //线颜色
                    strokeOpacity: 1, //线透明度
                    strokeWeight: 1, //线宽
                    fillColor: '#FFFFFF', //填充色
                    fillOpacity: 0.25, //填充透明度
                }
            }
            return {
                cursor: 'default',
                bubble: true,
                strokeColor: '#FFFFFF', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: null, //填充色
                fillOpacity: 0.35, //填充透明度
            };
        });

        //绘制父区域
        districtExplorer.renderParentFeature(areaNode, {
            cursor: 'default',
            bubble: true,
            strokeColor: '#FFFFFF', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: null, //填充色
            fillOpacity: 0.35, //填充透明度
        });
    }

    //切换区域后刷新显示内容
    function refreshAreaNode(areaNode) {
        // alert(areaNode);
        districtExplorer.setHoverFeature(null);

        renderAreaPolygons(areaNode, 'null');

        //更新选中节点的class
        let $nodeEles = $('#area-tree').find('h2');

        $nodeEles.removeClass('selected');

        let $selectedNode = $nodeEles.filter('h2[data-adcode=' + areaNode.getAdcode() + ']').addClass('selected');

        //展开下层节点
        $selectedNode.closest('li').removeClass('hide-sub');

        //折叠下层的子节点
        $selectedNode.siblings('ul.sublist').children().addClass('hide-sub');
    }

    //加载区域
    function loadAreaNode(adcode, callback) {

        districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

            if (error) {
                if (callback) {
                    callback(error);
                }
                console.error(error);
                return;
            }

            currentAreaNode = window.currentAreaNode = areaNode;

            //设置当前使用的定位用节点
            districtExplorer.setAreaNodesForLocating([currentAreaNode]);

            refreshAreaNode(areaNode);

            if (callback) {
                callback(null, areaNode);
            }
        });
    }

    //重庆
    loadAreaNode(map_adcode);
});
var disCountry2 = new AMap.DistrictLayer.Country({
    zIndex: 19,
    SOC: 'CHN',
    depth: 1,
    styles: {
        'fill': function (props) {
            return getColorBySoc(props.adcode_pro)
        }
    }
});
map2.add(disCountry2);
// ----------------------------------------------------------
map.on("moveend", function (e) {
    console.log(map.getCenter());
});
map2.on("moveend", function (e) {
    console.log(map2.getCenter());
});

// ************* 缩放获取当前地图缩放级别 ******************
map.on("zoomend", function () {
    console.log(map.getZoom());
});
map2.on("zoomend", function () {
    console.log(map2.getZoom());
});